<template>
  <div class="paramverifi tapStyle secondary-page-mode">
    <div class="secondary-toolbar">
      <span>时间选择 : </span>
      <div class="layoutBox" style="width:242px">
            <el-date-picker
              v-model="dateRange"
              type="daterange"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
      </div>&emsp;&emsp;
       <span>监测项目 : </span>
      <div class="layoutBox" style="width:190px">
            <el-select v-model="value" multiple collapse-tags placeholder="请选择">
                  <el-option
                    v-for="item in optionData"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
            </el-select>
      </div>&emsp;&emsp;
      <el-button @click="searchData"><i class="iconfont icon-sousuo"></i>查询</el-button>
      <el-button @click="exportExcel()" type='delet'><i class="iconfont icon-daochu"></i>导出</el-button>
    </div>
    <div class="currency-mode-wrap">
      <!-- <div class="reminder-wrap">
        <span class="reminder-title">温馨提示</span>
        <div class="reminder-content">
          <div class="reminder-text">
            <p>所选时间段内，X个点位共有“周核查”W次，共有合格项m个，不合格项n个。影响数据y条。点位1、点位2的上周核查时间距今已有7天；站点3的上周核查距今已有6天。</p>
            <div><el-button type="noticonsecondBtn"> 生成任务 </el-button></div>
          </div>
        </div>
        <div class="reminder-toolbar">
          <div class="state-legend">
            <span><i class="qualified-icon"></i> 合格</span>
            <span><i class="unqualified-icon"></i> 不合格</span>
          </div>
          <div class="state-radio-wrap">
            <el-radio-group v-model="stateRadio" size="small" @change = "toggleTab">
              <el-radio-button label="1">当前断面</el-radio-button>
              <el-radio-button label="2">所有断面</el-radio-button>
            </el-radio-group>
          </div>
        </div>
      </div> -->
      <div class="currency-body-toggle" style="padding-top: 0;height: calc(100%)">
        <div v-show="stateRadio === '1'" style="height: 100%">
          <div class="tablebox" style="height: calc(100% - 34px);">
            <el-table
              :data="tableData"
              ref="table"
              border
              height="100%">
              <el-table-column
                type="index"
                width="60"
                label="序号">
              </el-table-column>
              <el-table-column
                prop="time"
                label="监测时间">
              </el-table-column>
              <!-- <el-table-column
                prop="auditTime"
                label="审核时间">
              </el-table-column> -->
              <el-table-column
                prop="indexName"
                label="监测项目">
              </el-table-column>
              <el-table-column
                prop="indexUnit"
                label="单位">
              </el-table-column>
              <el-table-column
                prop="value"
                label="仪器测试值">
              </el-table-column>
              <el-table-column
                prop="standardSamplesValue"
                label="标准液浓度">
              </el-table-column>
              <el-table-column
                prop="error"
                label="误差">
                <template slot-scope="scope">
                  {{ scope.row.indexName === 'pH' || scope.row.error === '-' ? scope.row.error : scope.row.error+' %'}}
                </template>
              </el-table-column>
              <el-table-column
                prop="technicalRequirement"
                label="技术要求">
              </el-table-column>
              <el-table-column
                prop="qualification"
                label="是否合格">
              </el-table-column>
            </el-table>
          </div>
          <div class="paginationBox">
            <el-pagination
              @size-change="paginationSizeChange"
              @current-change="paginationChange"
              :current-page.sync="currentPage"
              :page-size="pageSize"
              background
              :small = "true"
              popper-class = "select-common-option"
              :page-sizes = "pageList"
              layout="total,sizes,slot,->,prev, pager, next, jumper"
              :total="totalRecords">
              <span class="el-pagination__current">当前第{{currentPage}}/{{totalPage}}页</span>
            </el-pagination>
          </div>
        </div>
        <div class="chart-wrap" v-show="stateRadio === '2'" style="height: 100%;">
          <div class="tablebox" style="height: calc(100% - 34px);">
            <el-table
              :data="tableDataAll"
              height="100%"
              border
              style="width: 100%">
              <el-table-column
                prop="monitor"
                label="行政区">
              </el-table-column>
              <el-table-column
                prop="monitor"
                label="流域">
              </el-table-column>
              <el-table-column
                prop="monitor"
                label="断面名称">
              </el-table-column>
              <el-table-column
                prop="monitor"
                label="监测时间">
              </el-table-column>
              <el-table-column
                prop="audit"
                label="审核时间">
              </el-table-column>
              <el-table-column
                prop="object"
                label="监测项目">
              </el-table-column>
              <el-table-column
                prop="unit"
                label="单位">
              </el-table-column>
              <el-table-column
                prop="testValue"
                label="仪器测试值">
              </el-table-column>
              <el-table-column
                prop="solution"
                label="标准液浓度">
              </el-table-column>
              <el-table-column
                prop="error"
                label="误差">
              </el-table-column>
              <el-table-column
                prop="requirement"
                label="技术要求">
              </el-table-column>
              <el-table-column
                prop="qualified"
                label="是否合格">
              </el-table-column>
            </el-table>
          </div>
          <div class="paginationBox">
            <el-pagination
              @size-change="paginationSizeChangeB"
              @current-change="paginationChangeB"
              :current-page.sync="currentPage"
              :page-size="pageSizeB"
              background
              :small = "true"
              popper-class = "select-common-option"
              :page-sizes = "pageListB"
              layout="total,sizes,slot,->,prev, pager, next, jumper"
              :total="totalRecordsB">
              <span class="el-pagination__current">当前第{{currentPageB}}/{{totalPageB}}页</span>
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {exportTableData} from '../../assets/js/tableExport'
  export default {
  name: "paramverifi",
  data() {
    return {
      stationName:'',
      dateRange: "",
      stateRadio: "1",
      stationId: "",
      value: ["w01001", "w01010","w01009","w01014","w01003"],
      optionData: [
       
        {
          value: "w01001",
          label: "pH"
        },
        {
          value: "w01010",
          label: "水温"
        },
        {
          value: "w01009",
          label: "溶解氧"
        },
        {
          value: "w01014",
          label: "电导率"
        },
        {
          value: "w01003",
          label: "浊度"
        }
      ],
      currentPage: 1, //分页组件当前页
      pageSize: 10, //分页每页多少条数据
      totalRecords: 0, //总条数
      pageList: [10, 15, 20], //设置每页多少条
      tableData: [],
      tableDataAll: [],
      currentPageB: 1, //分页组件当前页
      pageSizeB: 10, //分页每页多少条数据
      totalRecordsB: 0, //总条数
      pageListB: [10, 15, 20], //设置每页多少条
      fieldList:['time','indexName','indexUnit',
        'value','standardSamplesValue','error',
        'technicalRequirement','qualification'],
    };
  },
  computed: {
    totalPage() {
      //计算总页数
      let number = 0;
      number = Math.ceil(this.totalRecords / this.pageSize);
      return number === 0 ? 1 : number;
    },
    totalPageB() {
      //计算总页数
      let number = 0;
      number = Math.ceil(this.totalRecordsB / this.pageSizeB);
      return number === 0 ? 1 : number;
    },
    stationInfo: {
      get: function() {
        return this.$store.state.stationInfo;
      }
    }
  },
  methods: {
    paginationSizeChange(val) {
      this.pageSize = val;
      this.getTableData();
    },
    paginationChange(val) {
      this.currentPage = val;
      this.getTableData();
    },
    paginationSizeChangeB(val) {
      this.pageSize = val;
      this.getAllTableData();
    },
    paginationChangeB(val) {
      this.currentPage = val;
      this.getAllTableData();
    },
    toggleTab(val) {
      if(val === '2'){
        this.getAllTableData();
      }
    },
    //查询表格数据
    searchData() {
      this.getTableData();
      // this.getAllTableData();
    },
    //获取表格数据
    getTableData() {
     
      this.$http.get("/Quality/CQtestData/fiveParameterData", {
          params: {
            startTime: this.dateRange[0].format('yyyy-MM-dd'),
            endTime: this.dateRange[1].format('yyyy-MM-dd'),
            indexCodes: this.value.join(","),
            stationCodes: this.stationId, //this.stationId
            ifCurrentSection: true,// true为当前断面,false为所有
            pageNumber: this.currentPage,
            pageSize: this.pageSize,
          }
        }).then(res => {
          if (res.data.code === 0) {
            this.tableData = res.data.content.dataList;
            this.totalRecords = res.data.content.totalRecords;
          }
        });
    },
    //获取表格数据
    getAllTableData() {
      this.$http.get("/Quality/testData/fiveParameterData", {
          params: {
            startTime: this.dateRange[0].format('yyyy-MM-dd'),
            endTime: this.dateRange[1].format('yyyy-MM-dd'),
            indexCodes: this.value.join(","),
            stationCodes: this.stationId, //this.stationId
            ifCurrentSection: false,// true为当前断面,false为所有
            pageNumber: this.currentPageB,
            pageSize: this.pageSizeB,
          }
        }).then(res => {
          if (res.data.code === 0) {
            console.log(res);
            this.tableDataAll = res.data.content.dataList;
            this.totalRecordsB = res.data.content.totalRecords;
          }
        });
    },
    //导出表格
    exportExcel(){
      let {table} = this.$refs;
      let tableBox = table.$el;
      let header = tableBox.querySelector('.el-table__header');
      let title = this.stationName+'常规五参数周核查';
      let params = {
        headerProp:this.fieldList.join(','),
        startTime: this.dateRange[0].format('yyyy-MM-dd'),
        endTime: this.dateRange[1].format('yyyy-MM-dd'),
        indexCodes: this.value.join(','),
        stationCodes: this.stationId,
        tableType:'FIVE_PARAMETER_DATA',
        ifCurrentSection: true,
        pattern:'yyyy-MM-dd HH:mm:ss'
      };
      exportTableData(header,title,'','1',"/Quality/exports/testDataExcel",params);
    }
  },
  mounted() {},
  created() {
    //初始化时间
    let startTime = new Date().setDate(new Date().getDate() - 2);
    let endTime = new Date();
    this.dateRange = [
      new Date(startTime),
      endTime
    ];
  },
  watch: {
    stationInfo(value) {
      if (value.length > 0) {
        this.stationId = value[0].nodeId;
        this.stationName = value[0].nodeName;
        this.getTableData();

      }
    }
  }
};
</script>

<style scoped lang="less">
</style>
